<template>
  <div class="app-push">
    <Row class="title-top mb-20">
      <span>公有云应用</span>
    </Row>

    <div class="table mt-10 mb-15">
      <Table :loading="loading" stripe border :columns="columns" :data="appList">
        <template slot-scope="{ row }" slot="purchaseStatus">
          <template v-if="row.purchaseStatus === 1">
            <span style="color:#2EBE6D">已接入</span>
          </template>
          <template v-else>
            <span style="color:#515A6E">待接入</span>
          </template>
        </template>
        <!--template被渲染成div vue2.6插槽新写法-->
        <template slot-scope="{ row }" slot="serviceList">
          <Tooltip transfer theme="light" placement="bottom-start">
            <!--数组使用join(",")变成字符串连接格式，而不是通过+'，'形式处理，不然最后一个需要单独处理 -->
            <span>{{ serviceName(row.serviceList).join(",") }}</span>
            <div slot="content" style="white-space:normal; word-break: break-word;">
              <Tag v-for="(item, index) in serviceName(row.serviceList)" :key="index">{{
                item
              }}</Tag>
            </div>
          </Tooltip>
        </template>
      </Table>
      <Row>
        <Page
          class="mt-15"
          :total="totalSize"
          :current="queryListParams.pageNumber"
          show-elevator
          @on-change="pageNumChange"
          @on-page-size-change="pageSizeChange"
        />
      </Row>
    </div>
  </div>
</template>
<script>
import { queryPublicApp } from "@api/service";
import { mapState } from "vuex";
export default {
  name: "AppPush",
  data() {
    return {
      totalSize: 0,
      loading: false,
      appList: [],
      purchaseStatus: 2
    };
  },
  computed: {
    queryListParams() {
      return {
        pageNumber: 1,
        pageSize: 10,
        schoolCode: "070501",
        searchKey: ""
      };
    },
    columns() {
      return [
        {
          title: "应用名称",
          key: "appName"
        },
        {
          title: "应用ID",
          key: "appId"
        },
        {
          title: "开发厂商",
          key: "venderName"
        },
        {
          title: "状态",
          key: "purchaseStatus",
          slot: "purchaseStatus"
        },
        {
          title: "接入时间",
          key: "purchaseTime"
        },
        {
          title: "服务",
          slot: "serviceList",
          ellipsis: true,
          width: 400
          // render: (h, params) => {
          //   const { serviceList } = params.row;
          //   const list = serviceList || [];
          //   function transforText(it) {
          //     const { isMobileService, isWebService } = it;
          //     let text = "";
          //     if (isWebService) {
          //       text = "(PC)";
          //     } else if (isMobileService) {
          //       text = "(移动)";
          //     } else if (isWebService && isMobileService) {
          //       text = "(PC/移动）";
          //     }
          //     return text;
          //   }
          //   const text = list
          //     .map(it => {
          //       let text = transforText(it);
          //       return `${it.serviceName}${text}`;
          //     })
          //     .join(",");

          //   //数据对象
          //   const scopedSlots = {
          //     content: () => (
          //       <div style="white-space: normal">
          //         {list.map(it => {
          //           let text = transforText(it);
          //           return <Tag>{it.serviceName + text}</Tag>;
          //         })}
          //       </div>
          //     )
          //     //content的写法: content:()=>() 而不是 content:()=>{}
          //   };

          //   return (
          //     // jsx输出内容为一个{}而不是{{}},此部分采用的是jsx写法
          //     //如何在tooltip组件上渲染插槽作用域,使用scopedSlots content提示框的内容，定义此 slot 时，会覆盖 props content
          //     // VNode 数据对象中的 scopedSlots 字段,scopedSlots作用域插槽函数现在保证返回一个 VNode 数组
          //     // 如何在TabPane上渲染tooltip组件？<TabPane :label="renderUpLabel"></TabPane> 通过计算属性renderUpLabel渲染组件TabLabel,TabLabel含有Tooltip组件
          //     <Tooltip
          //       transfer
          //       theme="light"
          //       placement="bottom-start"
          //       scopedSlots={scopedSlots}
          //     >
          //       {text}
          //     </Tooltip>
          //   );
          //}
        }
      ];
    },
    serviceName(serviceList) {
      // 计算属性传递参数
      return function(serviceList) {
        return this.serviceNameMethod(serviceList);
      };
    }
  },
  methods: {
    async queryList() {
      this.loading = true;
      const [err, data] = await queryPublicApp(this.queryListParams);
      this.loading = false;
      if (err) {
        const msg = err || "获取列表错误";
        this.$Message.error(msg);
        return;
      }
      if (!data) return;
      this.totalSize = data.totalSize;
      this.appList = data.rows;
    },
    pageNumChange(num) {
      this.queryListParams.pageNumber = num;
      this.queryList();
    },
    pageSizeChange(num) {
      this.queryListParams.pageSize = num;
      this.queryList();
    },

    serviceNameMethod(serviceList) {
      const list = serviceList || [];
      function transforText(it) {
        const { isMobileService, isWebService } = it;
        let text = "";
        if (isWebService) {
          text = "（PC）";
        } else if (isMobileService) {
          text = "（移动）";
        } else if (isWebService && isMobileService) {
          text = "（PC/移动）";
        }
        return text;
      }
      return list.map(it => {
        let text = transforText(it);
        return `${it.serviceName}${text}`;
      });
    }
  },
  mounted() {
    this.queryList();
  }
};
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins'

>>>.ivu-tooltip {
  ellipsis()
  display: block
}
.app-push {
  .plat_type {
    font-size: 14px
    display: flex
    align-items: center
  }
}
.item {
  word-break: break-all
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
}
</style>
